import React from 'react'
import css from './HeadNav.module.less'
import { Link } from 'react-router-dom'
import logoImg from '@/assets/images/logo.png'
import { Row, Col, Avatar, Menu } from 'antd'
import { MenuInfo } from 'rc-menu/lib/interface'
const { SubMenu, Item } = Menu
type P = {}

type S = {
  current: string
}

export default class HeadNav extends React.Component<P, S> {
  constructor(props: P) {
    super(props)
    this.state = {
      current: ''
    }
  }
  handleClick = (e: MenuInfo) => {
    this.setState({ current: e.key })
    console.log(e.key, '开发中...')
  }
  render() {
    const { current } = this.state
    return (
      <div>
        <div className={css.nav_max}>
          <Row>
            <Col xs={24} md={2}>
              <Link to="/app/home" className={`jac ${css.logo_box}`}>
                <Avatar size={48} src={logoImg} />
              </Link>
            </Col>
            <Col xs={0} md={{ span: 18, offset: 4 }}>
              <Menu
                onClick={this.handleClick}
                selectedKeys={[current]}
                mode="horizontal"
              >
                <Item key="1">
                  <Link to="/app/home">首页</Link>
                </Item>
                <SubMenu key="2" title="笔记">
                  <SubMenu key="2-1" title="前端">
                    <Item key="2-1-1">Vue</Item>
                    <Item key="2-1-2">React</Item>
                    <Item key="2-1-3">Nodejs</Item>
                  </SubMenu>
                  <SubMenu key="2-2" title="后端">
                    <Item key="2-2-4">Java</Item>
                    <Item key="2-2-5">Python</Item>
                  </SubMenu>
                </SubMenu>
                <SubMenu key="3" title="服务器">
                  <Item key="3-1">Linux</Item>
                  <Item key="3-2">Docker</Item>
                </SubMenu>
                <Item key="4">
                  <span> 其他 </span>
                </Item>
              </Menu>
            </Col>
          </Row>
        </div>
      </div>
    )
  }
}
